<template>
  <div>
    <div ref="container" class="container"></div>
  </div>
</template>
<script setup>

import { onMounted, ref } from 'vue'
import { scene, camera, useBox, useRound, THREE } from './utils/index'
//需单独引入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'


useBox()



// useRound()


window.addEventListener('resize', () => {
  // 让相机的宽高比更新
  camera.aspect = window.innerWidth / window.innerHeight
  //更新投影矩阵
  camera.updateProjectionMatrix()
  //更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight)
})


let controls = null

// 创建渲染器
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)

const render = () => {
  renderer.render(scene, camera)
  requestAnimationFrame(render)
}

const container = ref(null)
onMounted(() => {
  if (container.value) { // 修正这里
    // controls = new OrbitControls(camera, renderer.domElement)
    // controls.enableDamping = true
    // controls.update()
    container.value.appendChild(renderer.domElement)
    render()

    let isMouseDown = false;
    container.value.addEventListener("mousedown", () => {
      isMouseDown = true;
    }, false);
    container.value.addEventListener("mouseup", () => {
      isMouseDown = false;
    }, false);
    container.value.addEventListener("mouseout", () => {
      isMouseDown = false;
    }, false);

    container.value.addEventListener("mousemove", (event) => {
      if (isMouseDown) {
        camera.rotation.x += event.movementY * 0.01;
        camera.rotation.y += event.movementX * 0.01;
        camera.rotation.order = "YXZ"
      }
    })

  }
}) 
</script>
<style scoped lang="scss">
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container {
  width: 100vw;
  height: 100vh;
}
</style>
